<template>
    <div class="container">
       <span class="content" @click="handleClick('/home')">
           <img :src="$route.path.includes('/home') ? tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
            <span :class="{on: '/home' === $route.path}">
                首页
            </span>
       </span>
        <span class="content" @click="handleClick('/recommend')">
           <img  :src="$route.path.includes('/recommend') ? tabBarImgArr[1].selected: tabBarImgArr[1].normal"  alt="">
            <span>
                首页
            </span>
       </span>
        <span class="content" @click="handleClick('/search')">
           <img :src="$route.path.includes('/search') ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="">
            <span>
                首页
            </span>
       </span>
        <span class="content" @click="handleClick('/chat')">
           <img src="./../../common/img/icon_home.png" alt="">
            <span>
                首页
            </span>
       </span>
        <span class="content" @click="handleClick('/me')">
           <img src="./../../common/img/icon_home.png" alt="">
            <span>
                个人中心
            </span>
       </span>
    </div>
</template>

<script>
export default {
  name: 'TabBar',
  data () {
      return {
        tabBarImgArr: [
            {normal: require('./../../common/img/icon_home.png'), selected: require('./../../common/img/icon_home_selected.png')},
            {normal: require('./../../common/img/icon_intro.png'), selected: require('./../../common/img/icon_intro_selected.png')},
            {normal: require('./../../common/img/icon_search.png'), selected: require('./../../common/img/icon_search_selected.png')},
            {normal: require('./../../common/img/icon_chat.png'), selected: require('./../../common/img/icon_chat_selected.png')},
            {normal: require('./../../common/img/icon_mine.png'), selected: require('./../../common/img/icon_mine_selected.png')}
      ]
      }
  },
  methods: {
      handleClick(path) {
          this.$router.replace(path)
      }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 50px
  display flex
  position fixed
  left 0
  right 0
  bottom 0
  z-index 99
  background-color #fff
  .content
    display flex
    flex 1
    flex-direction column
    align-items center
    justify-content center
    font-size 14px
    color #666
    img 
       width 35%
       padding-bottom 2px
    .on
      color red
</style>